<template>
  <div class="ivr-edit-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <div class="back-btn" @click="back">
          <Icon icon="ep:arrow-left" class="back-icon" />
        </div>
        <div class="flow-info" v-if="ivrRadio == '主流程'">
          <div class="flow-name">{{ formState.name }}</div>
          <div class="flow-time">保存时间: {{ formatDate(formState.createTime) }}</div>
        </div>
      </div>

      <div class="toolbar-center">
        <el-radio-group v-model="ivrRadio" class="tab-radio-group">
          <el-radio-button label="主流程">
            <Icon icon="ep:connection" class="tab-icon" />
            <span>主流程</span>
          </el-radio-button>
          <el-radio-button label="知识库">
            <Icon icon="ep:reading" class="tab-icon" />
            <span>知识库</span>
          </el-radio-button>
          <el-radio-button label="意向标签">
            <Icon icon="ep:price-tag" class="tab-icon" />
            <span>意向标签</span>
          </el-radio-button>
          <el-radio-button label="录音">
            <Icon icon="ep:microphone" class="tab-icon" />
            <span>录音</span>
          </el-radio-button>
          <el-radio-button label="AI角色">
            <Icon icon="ep:user" class="tab-icon" />
            <span>AI角色</span>
          </el-radio-button>
        </el-radio-group>
      </div>

      <div class="toolbar-right">
        <div v-if="ivrRadio == '主流程'" class="action-buttons">
          <el-popover placement="bottom" trigger="click" width="320" class="component-popover">
            <div class="popover-content">
              <div class="popover-header">
                <Icon icon="ep:grid" class="header-icon" />
                <span class="header-title">基础组件</span>
              </div>
              <el-divider class="header-divider" />

              <div class="component-grid">
                <div
                  v-for="item in nodeList"
                  :key="item.id"
                  class="component-item"
                  @click="handleDragAdd(item)"
                >
                  <div class="component-icon" :style="{ background: item.bgc }">
                    <img :src="item.img" alt="" class="icon-img" />
                  </div>
                  <div class="component-info">
                    <div class="component-name">{{ item.name }}</div>
                    <div class="component-desc">{{ item.des }}</div>
                  </div>
                </div>
              </div>
            </div>
            <template #reference>
              <el-button class="add-component-btn">
                <Icon icon="ep:plus" class="btn-icon" />
                添加组件
              </el-button>
            </template>
          </el-popover>

          <el-button type="primary" @click="submit" class="save-btn">
            <Icon icon="ep:document" class="btn-icon" />
            保存
          </el-button>

          <el-button type="success" @click="release" class="publish-btn">
            <Icon icon="ep:upload" class="btn-icon" />
            发布
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 流程编辑器 -->
      <div
        ref="containerRef"
        v-loading="loading"
        id="graph"
        class="flow-editor"
        v-show="ivrRadio == '主流程'"
      ></div>

      <!-- 知识库 -->
      <div class="content-panel" v-show="ivrRadio == '知识库'">
        <KnowLedgeBase :ivrId="formState.id" :groupId="formState.groupId" />
      </div>

      <!-- 意向标签 -->
      <div class="content-panel" v-show="ivrRadio == '意向标签'">
        <IntentionLabel :ivrId="formState.id" :groupId="formState.groupId" />
      </div>

      <!-- 录音 -->
      <div
        class="content-panel content-panel2"
        v-show="ivrRadio == '录音'"
        style="overflow-y: auto"
      >
        <SoundRecording :ivrId="formState.id" :groupId="formState.groupId" />
      </div>

      <!-- AI角色 -->
      <div class="content-panel" v-show="ivrRadio == 'AI角色'">
        <AiRole :ivrId="formState.id" :groupId="formState.groupId" />
      </div>
    </div>

    <!-- 流程控制工具 -->
    <div class="flow-controls" v-show="ivrRadio == '主流程'">
      <div class="control-group">
        <el-tooltip content="缩小" placement="left">
          <div class="control-btn" @click="() => useStore.getLf.zoom(false)">
            <Icon icon="ep:zoom-out" />
          </div>
        </el-tooltip>

        <el-tooltip content="放大" placement="left">
          <div class="control-btn" @click="() => useStore.getLf.zoom(true)">
            <Icon icon="ep:zoom-in" />
          </div>
        </el-tooltip>

        <el-tooltip content="适应屏幕" placement="left">
          <div class="control-btn" @click="() => useStore.getLf.fitView()">
            <Icon icon="ep:full-screen" />
          </div>
        </el-tooltip>
      </div>
    </div>

    <!-- 训练按钮 -->
    <div class="train-trigger" @click="showTran" v-if="isShow && ivrRadio == '主流程'">
      <div class="train-icon">
        <Icon icon="ep:cpu" />
      </div>
      <div class="train-text">
        <span>训</span>
        <span>练</span>
      </div>
    </div>

    <TeleportContainer :flow-id="flowId" />
  </div>

  <!-- 训练弹窗 -->
  <ivrTrain ref="ivrTranRef" @setShow="setShow" :ivrId="formState.id" />
</template>

<script setup>
import LogicFlow from '@logicflow/core'
import '@logicflow/core/es/index.css'
import { register, getTeleport } from '@logicflow/vue-node-registry'
import { cloneDeep } from 'lodash-es'
import { useIvrStore } from '@/store/modules/ivr'
import { generateRandomString } from '@/utils/node'
import { Plus, ZoomOut, ZoomIn, FullScreen } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'
import KnowLedgeBase from './knowledgeBase/index.vue'
import IntentionLabel from './intentionLabel/index.vue'
import SoundRecording from './soundRecording/index.vue'
import AiRole from './aiRole/index.vue'
import ivrTrain from './ivrTrain/index.vue'

const message = useMessage()

import {
  getIvr,
  updateIvrFlow,
  getIvrKeywordsList,
  getIvrKeys,
  getRobotRole
} from '@/api/call/ivr/index.ts'
import StartNode from './node/start.vue'
import EndNode from './node/end.vue'
import PlayBackNode from './node/playback.vue'
import MenuNode from './node/menu.vue'
import ReceiveNode from './node/receive.vue'
import TransferNode from './node/transfer.vue'
import HangupNode from './node/hangup.vue'
import SatisfactionNode from './node/satisfaction.vue'
import HttpNode from './node/http.vue'
import JumpNode from './node/jump.vue'
import wxNode from './node/wx.vue'
import CustomEdge from './node/CustomEdge'
import CustomLeft from './node/CustomLeft'
import CustomRight from './node/CustomRight'
import CustomeBil from './node/CustomeBil'
import CustomeLf from './node/CustomLf'
import CustomAnchor from './node/CustomAnchor'
import LfNode from './node/lf.vue'
import { emitter } from '@/utils/eventBus'

defineOptions({ name: 'IvrEdit' })

const useStore = useIvrStore()
const { query } = useRoute()
const router = useRouter()
const TeleportContainer = getTeleport()

const nodeList = computed(() => {
  return useStore.getNodeList
})

const visible = ref(false)
const formState = reactive({
  id: '',
  groupId: '',
  name: '',
  desc: '',
  status: '',
  flowData: '',
  createTime: ''
})
const ivrRadio = ref('主流程')
const containerRef = ref(null)
const loading = ref(false)
const flowId = ref('')
const ivrTranRef = ref(null)
const isShow = ref(true)

onMounted(async () => {
  await getKeyList()
  formState.id = query.id
  formState.groupId = query.groupId

  if (containerRef.value) {
    const lf = new LogicFlow({
      container: containerRef.value,
      height: window.innerHeight - 80,
      multipleSelectKey: 'ctrl',
      nodeTextEdit: false,
      edgeTextEdit: false,
      nodeSelectedOutline: true,
      edgeSelectedOutline: true,
      keyboard: {
        enabled: false
      },
      outline: true,
      background: {
        color: '#FFFFFF'
      },
      grid: true,
      edgeTextDraggable: true,
      edgeType: 'bezier',
      style: {
        anchor: {
          r: 8,
          fill: '#407fff',
          stroke: '#ffffff',
          hover: {
            fill: '#407fff'
          }
        },
        outline: {
          hover: {}
        }
      }
    })

    lf.setTheme({
      node: {
        stroke: 'none',
        strokeWidth: 0
      },
      nodeSelected: {
        stroke: '#1890ff',
        strokeWidth: 2
      }
    })

    // 注册节点
    register({ type: 'start-node', component: StartNode, model: CustomRight }, lf)
    register({ type: 'end-node', component: EndNode, model: CustomLeft }, lf)
    register({ type: 'playback-node', component: PlayBackNode, model: CustomeBil }, lf)
    register({ type: 'menu-node', component: MenuNode, model: CustomAnchor }, lf)
    register({ type: 'receive-node', component: ReceiveNode, model: CustomeBil }, lf)
    register({ type: 'transfer-node', component: TransferNode, model: CustomeBil }, lf)
    register({ type: 'hangup-node', component: HangupNode, model: CustomeBil }, lf)
    register({ type: 'satisfaction-node', component: SatisfactionNode, model: CustomeBil }, lf)
    register({ type: 'http-node', component: HttpNode, model: CustomeBil }, lf)
    register({ type: 'jump-node', component: JumpNode, model: CustomeBil }, lf)
    register({ type: 'wx-node', component: wxNode, model: CustomeBil }, lf)
    register({ type: 'if-node', component: LfNode, model: CustomeLf }, lf)

    // 事件监听
    lf.on('graph:rendered', ({ graphModel }) => {
      flowId.value = graphModel?.flowId || ''
    })

    let currentHoverEdge = null

    lf.on('edge:mouseenter', ({ data }) => {
      if (data.type === 'bezier') {
        if (currentHoverEdge && currentHoverEdge !== data.id) {
          lf.changeEdgeType(currentHoverEdge, 'bezier')
        }
        currentHoverEdge = data.id
        lf.changeEdgeType(data.id, 'CustomEdge')
      }
    })

    lf.on('edge:mouseleave', ({ data }) => {
      if (currentHoverEdge === data.id) {
        setTimeout(() => {
          if (currentHoverEdge === data.id) {
            lf.changeEdgeType(data.id, 'bezier')
            currentHoverEdge = null
          }
        }, 100)
      } else {
        lf.changeEdgeType(data.id, 'bezier')
      }
    })

    lf.on('node:mouseenter', () => {
      if (currentHoverEdge) {
        lf.changeEdgeType(currentHoverEdge, 'bezier')
        currentHoverEdge = null
      }
    })

    lf.on('blank:click', () => {
      if (currentHoverEdge) {
        lf.changeEdgeType(currentHoverEdge, 'bezier')
        currentHoverEdge = null
      }
    })

    lf.on('anchor:drop', (data) => {
      if (data.edgeModel.sourceNodeId.indexOf('menu_') != -1) {
        const { nodeModel, edgeModel } = data
        const sourceAnchorId = edgeModel.sourceAnchorId
        const id = edgeModel.id
        const endg = lf.getEdgeModelById(id)
        const index = sourceAnchorId.split('_')[0]
        if (nodeModel.properties.inputType == 1) {
          const properties = nodeModel.properties.menuButtons
          endg.updateText(properties[index].buttonValue)
        } else {
          const properties = nodeModel.properties.matching
          endg.updateText(properties[index].next + ':' + properties[index].branch)
        }
      }
      if (data.edgeModel.sourceNodeId.indexOf('if_') != -1) {
        const { nodeModel, edgeModel } = data
        const sourceAnchorId = edgeModel.sourceAnchorId
        const id = edgeModel.id
        const endg = lf.getEdgeModelById(id)

        // 根据锚点的实际语义确定连线文本
        let edgeText = ''
        const anchors = nodeModel.getDefaultAnchor()
        const sourceAnchor = anchors.find((anchor) => anchor.id === sourceAnchorId)

        const num = nodeModel.properties.nodeIndex
        if (sourceAnchor) {
          if (sourceAnchor.name === 'if') {
            edgeText = `${num}-if:IF`
            emitter.emit('if_target')
          } else if (sourceAnchor.name === 'elseif') {
            edgeText = `${num}-else-if:ELSE-IF`
            emitter.emit('if_target2')
          } else if (sourceAnchor.name === 'else') {
            edgeText = `${num}-else:ELSE`
            emitter.emit('if_target3')
          }
        }

        // 更新连线文本
        if (edgeText) {
          endg.updateText(edgeText)
        }
      }
    })

    lf.on('edge:add', ({ data }) => {
      if (data.targetNodeId && data.targetNodeId.indexOf('if_') === 0) {
        emitter.emit('if_node', {
          type: 'add',
          data
        })
      }
    })

    lf.on('edge:delete', ({ data }) => {
      if (data.targetNodeId && data.targetNodeId.indexOf('if_') === 0) {
        emitter.emit('if_node', {
          type: 'delete',
          data
        })
      }
    })

    lf.register(CustomEdge)
    lf.render({})
    useStore.setLfRef(lf)
    feedbackData()
  }
})

const back = () => {
  router.push({
    path: '/call/ai-call/ivr-manage-ment'
  })
}

const getKeyList = async () => {
  useStore.setKeysList()
}

watch(
  () => useStore.getRefreshOption,
  (val) => {
    if (val) {
      feedbackData()
      useStore.setRefreshOption(false)
    }
  },
  {
    immediate: true,
    deep: true
  }
)

const feedbackData = async () => {
  try {
    loading.value = true
    const res = await getIvr(query.id)
    const { name, desc, status, flowData, createTime } = res
    Object.assign(formState, { name, name, desc, status, flowData, createTime })
    const data = flowData ? JSON.parse(flowData) : []
    const lf = useStore.getLf
    lf.render({})
    if (data.length != 0) {
      useStore.echoNodeIndex(data.nodes)
      nextTick(() => {
        lf.render(data)
      })
    } else {
      const node1 = lf.addNode(useStore.getNodes['start-node'])
      const node9 = lf.addNode(useStore.getNodes['end-node'])
      lf.addEdge({
        sourceNodeId: 'start',
        targetNodeId: 'end'
      })
    }
  } finally {
    loading.value = false
  }
}

const submit = async () => {
  const data = await getRobotRole({ flowId: formState.id })
  if (data) {
    const lf = useStore.getLf
    if (lf) {
      const lfData = lf.getGraphData()
      lfData.edges.forEach((item) => {
        if (item.text) {
          item.event =
            'next_' +
            (item.text.value.indexOf(':') != -1 ? item.text.value.split(':')[0] : item.text.value)
        } else {
          if (item.targetNodeId) item.event = 'next'
        }
      })
      const isName = lfData.nodes.some((item) => item.properties.name == '')
      if (isName) {
        message.error('请检测节点的名称')
        return
      }
      formState.flowData = JSON.stringify(lfData)
      await updateIvrFlow(formState)
      message.success('编辑成功')
    }
  } else {
    ElMessage.warning('请先检查AI角色')
  }
}

const release = async () => {
  await updateIvrFlow({ id: formState.id, status: 1 })
  message.success('发布成功')
}

const checkNodeIndexSequence = (arr) => {
  const sortedArr = [...arr].sort((a, b) => a.properties.nodeIndex - b.properties.nodeIndex)
  if (sortedArr[0].properties.nodeIndex !== 0) {
    return {
      isSequential: false,
      message: 'nodeIndex 没有从 0 开始',
      missingMinValue: 0
    }
  }
  let isSequential = true
  let missingMinValue = null

  for (let i = 0; i < sortedArr.length - 1; i++) {
    const current = sortedArr[i].properties.nodeIndex
    const next = sortedArr[i + 1].properties.nodeIndex

    if (next !== current + 1) {
      isSequential = false
      if (missingMinValue === null) {
        missingMinValue = current + 1
      }
    }
  }

  if (isSequential) {
    return {
      isSequential: true,
      message: 'nodeIndex 是按顺序增长的（从 0 开始）'
    }
  } else {
    return {
      isSequential: false,
      message: 'nodeIndex 没有按顺序增长',
      missingMinValue: missingMinValue
    }
  }
}

const handleDragAdd = (item) => {
  useStore.getLf.clearSelectElements()
  visible.value = false
  const arr = useStore.getLf.getGraphData().nodes.filter((i) => i.type == item.type)
  if (arr.length == 0) {
    const obj = JSON.parse(JSON.stringify(useStore.getNodes[item.type]))
    obj.id = useStore.getNodes[item.type].id + generateRandomString(6)
    obj.properties.nodeIndex = 0
    useStore.getLf.addNode(obj)
    useStore.setNodeIndex(item.type, 1)
  } else if (arr.length == 1) {
    const obj = JSON.parse(JSON.stringify(useStore.getNodes[item.type]))
    obj.id = useStore.getNodes[item.type].id + generateRandomString(6)
    obj.properties.nodeIndex = 1
    useStore.getLf.addNode(obj)
    useStore.setNodeIndex(item.type, 2)
  } else {
    const isSort = checkNodeIndexSequence(arr)
    if (isSort.isSequential) {
      const obj = JSON.parse(JSON.stringify(useStore.getNodes[item.type]))
      obj.id = useStore.getNodes[item.type].id + generateRandomString(6)
      useStore.getLf.addNode(obj)
      useStore.setNodeIndex(item.type)
    } else {
      const obj = JSON.parse(JSON.stringify(useStore.getNodes[item.type]))
      obj.id = useStore.getNodes[item.type].id + generateRandomString(6)
      obj.properties.nodeIndex = isSort.missingMinValue
      useStore.getLf.addNode(obj)
    }
  }
}

watch(
  () => ivrRadio.value,
  (newVal) => {
    if (newVal === '主流程') {
      nextTick(() => {
        const lf = useStore.getLf
        if (lf) {
          setTimeout(() => {
            lf.resize()
          }, 100)
        }
      })
    }
  },
  { immediate: true }
)

const setShow = () => {
  isShow.value = true
}

const showTran = () => {
  isShow.value = false
  ivrTranRef.value.open()
}
</script>

<style scoped lang="scss">
.ivr-edit-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
}

/* 顶部工具栏 */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 82, 204, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.2);
    transform: translateX(-2px);
  }
}

.back-icon {
  color: #0052cc;
  font-size: 18px;
}

.flow-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flow-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.flow-time {
  font-size: 12px;
  color: #6b7280;
}

.toolbar-center {
  flex: 0 0 auto;
}

.tab-radio-group {
  :deep(.el-radio-button) {
    .el-radio-button__inner {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      border-radius: 8px;
      border: 2px solid #e5e7eb;
      background: white;
      color: #6b7280;
      font-weight: 500;
      transition: all 0.2s ease;

      &:hover {
        border-color: #0052cc;
        color: #0052cc;
      }
    }

    &.is-active .el-radio-button__inner {
      background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
      border-color: #0052cc;
      color: white;
    }
  }
}

.tab-icon {
  font-size: 14px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.add-component-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;
  padding: 10px 16px;

  &:hover {
    border-color: #0052cc;
    color: #0052cc;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.save-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;

  .btn-icon {
    margin-right: 6px;
  }
}

.publish-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;

  .btn-icon {
    margin-right: 6px;
  }
}

/* 弹窗样式 */
.component-popover {
  :deep(.el-popover) {
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

.popover-content {
  padding: 0;
}

.popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
}

.header-icon {
  color: #0052cc;
  font-size: 16px;
}

.header-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.header-divider {
  margin: 0 16px 12px;
}

.component-grid {
  max-height: 400px;
  overflow-y: auto;
  padding: 0 8px 8px;
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c1c9d2 0%, #a8b4c0 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0052cc 0%, #1d4ed8 100%);
    box-shadow: 0 2px 4px rgba(0, 82, 204, 0.3);
  }
}

.component-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
  }
}

.component-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-img {
  width: 24px;
  height: 24px;
}

.component-info {
  flex: 1;
  min-width: 0;
}

.component-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 2px;
}

.component-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.flow-editor {
  width: 100%;
  height: 100%;
  background: white;
}

.content-panel {
  width: 100%;
  height: 100%;
  background: white;
}

/* 流程控制工具 */
.flow-controls {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 100;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.control-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;

  &:hover {
    background: #0052cc;
    color: white;
    border-color: #0052cc;
    transform: scale(1.05);
  }
}

/* 训练按钮 */
.train-trigger {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  width: 48px;
  height: 80px;
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 82, 204, 0.3);

  &:hover {
    width: 52px;
    box-shadow: -6px 0 25px rgba(0, 82, 204, 0.4);
  }
}

.train-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

.train-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .toolbar {
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px;
  }

  .toolbar-left,
  .toolbar-center,
  .toolbar-right {
    flex: none;
    width: 100%;
  }

  .toolbar-center {
    order: -1;
  }

  .tab-radio-group {
    width: 100%;

    :deep(.el-radio-button) {
      flex: 1;

      .el-radio-button__inner {
        width: 100%;
        justify-content: center;
      }
    }
  }
}

@media (max-width: 768px) {
  .toolbar {
    padding: 8px 12px;
  }

  .flow-info {
    display: none;
  }

  .action-buttons {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .add-component-btn,
  .save-btn,
  .publish-btn {
    width: 100%;
    justify-content: center;
  }

  .flow-controls {
    bottom: 12px;
    left: 12px;
  }

  .control-group {
    flex-direction: row;
    padding: 8px;
  }

  .train-trigger {
    width: 40px;
    height: 60px;

    &:hover {
      width: 44px;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .ivr-edit-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .toolbar {
    background: rgba(30, 41, 59, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .flow-name {
    color: #f9fafb;
  }

  .flow-time {
    color: #d1d5db;
  }

  .flow-editor,
  .content-panel {
    background: #374151;
  }

  .control-group {
    background: rgba(30, 41, 59, 0.95);
  }

  .control-btn {
    background: #4b5563;
    border-color: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
  }
}
.content-panel2 {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c1c9d2 0%, #a8b4c0 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0052cc 0%, #1d4ed8 100%);
    box-shadow: 0 2px 4px rgba(0, 82, 204, 0.3);
  }
}
</style>
